<template>
  <div class="customerintegralSubsidiary">
    <!-- 使用明细 -->
    <!-- <div style="margin:0 0 20px 0">使用明细</div> -->
    <!-- 查询条件 -->
    <el-form ref="form" :model="form" size="mini">
      <!-- 会员查询条件 -->
      <div style="display: flex; margin: 0 0 15px 0">
        <el-form-item
          label="会员手机号"
          style="display: flex; margin: 0 50px 0 0"
        >
          <el-input
            v-model="form.phone"
            @input="inputchange1"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号" style="display: flex; margin: 0 50px 0 0">
          <el-input
            v-model="form.cardNumber"
            @input="inputchange1"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="会员卡号"
          style="display: flex; margin: 0 50px 0 0"
        >
          <el-input
            v-model="form.vipNumber"
            @input="inputchange1"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="querybutton">查询会员信息</el-button>
        </el-form-item> -->
      </div>
      <!-- 会员信息 -->
      <div
        style="display: flex; font-size: 12px; margin: 0 0 20px 0"
        v-if="customerData.id != ''"
      >
        <div style="margin: 0 200px 0 0">
          会员姓名:{{ customerData.userName }}
        </div>
        <!-- <div style="margin:0 200px 0 0">会员卡号:{{customerData.cardDataList[0].cardNum}}</div> -->
        <div>积分数量:{{ customerData.integralSum }}</div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <!-- <div>冻结:{{customerData.frozenDeposit}}</div> -->
      </div>
      <!-- 金币查询条件 -->
      <div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="操作时间"
            style="display: flex; margin: 0 50px 0 0"
          >
            <el-date-picker
              value-format="yyyy-MM-dd"
              style="width: 180px"
              v-model="form.updateDateTimeMin"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="————" style="display: flex; margin: 0 50px 0 0">
            <el-date-picker
              value-format="yyyy-MM-dd"
              style="width: 180px"
              v-model="form.updateDateTimeMax"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="订单类型" style="display:flex;margin:0 50px 0 0">
            <el-select v-model="form.businessType" placeholder="请选择活动区域">
              <el-option label="酒店" value="hotel"></el-option>
              <el-option label="机票" value="flight"></el-option>
              <el-option label="贵宾厅" value="service"></el-option>
              <el-option label="火车票" value="train"></el-option>
              <el-option label="vip通道" value="VIPAisle"></el-option>
              <el-option label="值机" value="checkIn"></el-option>
              <el-option label="会员" value="customer"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="分类" style="display: flex; margin: 0 50px 0 0">
            <el-select v-model="form.changeType">
              <el-option label="增加" value="add"></el-option>
              <el-option label="减少" value="sub"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            label="是否审核"
            style="display: flex; margin: 0 50px 0 0"
          >
            <el-select v-model="form.auditStatus">
              <el-option label="是" value="notAudit"></el-option>
              <el-option label="否" value="passAudit"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="display: flex; margin: 0 50px 0 0">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex; margin: 0 0 15px 60%">
        <el-form-item style="display: flex; margin: 0 50px 0 0">
          <el-button type="primary" @click="customerintegral">查询</el-button>
          <el-button type="primary" @click="adjustThe">调整</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="Querydata"
      border
      stripe
    >
      <el-table-column
        label="对应单号"
        prop="orderId"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="流水号"
        prop="serialNumber"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="会员姓名"
        prop="userName"
        width="90px"
      ></el-table-column>
      <el-table-column
        label="会员手机号"
        prop="userAccount"
        width="100px"
      ></el-table-column>
      <el-table-column label="分类" prop="changeType" width="110px">
        <template slot-scope="scope">
          <template v-if="scope.row.changeType == 'add'">增加</template>
          <template v-if="scope.row.changeType == 'sub'">减少</template>
        </template>
      </el-table-column>
      <el-table-column label="金币变动原因" prop="source" width="120px">
        <template slot-scope="scope">
          <template v-if="scope.row.source == 'recharge'">充值</template>
          <template v-if="scope.row.source == 'compensation'">理赔</template>
          <template v-if="scope.row.source == 'rollback'">退款</template>
          <template v-if="scope.row.source == 'admin'">管理员操作</template>
        </template>
      </el-table-column>
      <!-- <el-table-column label="订单类型" prop="alterationtype"></el-table-column> -->
      <el-table-column
        label="预留款数量"
        prop="number"
        width="90px"
      ></el-table-column>
      <el-table-column
        label="标题"
        prop="title"
        width="90px"
      ></el-table-column>
      <el-table-column label="支付类型" prop="payType" width="110px">
        <template slot-scope="scope">
          <template v-if="scope.row.payType == 'hotel'">酒店</template>
          <template v-if="scope.row.payType == 'flight'">机票</template>
          <template v-if="scope.row.payType == 'train'">火车票</template>
          <template v-if="scope.row.payType == 'card'">会员</template>
        </template>
      </el-table-column>
      <el-table-column label="操作记录" prop="remark"></el-table-column>
      <el-table-column label="备注" prop="auditRemark"></el-table-column>

      <el-table-column
        label="操作人"
        prop="adminName"
        width="90px"
      ></el-table-column>
      <el-table-column label="操作时间" prop="expireTime"></el-table-column>
      <el-table-column
        label="审核人"
        prop="auditName"
        width="90px"
      ></el-table-column>
      <el-table-column label="是否审核" prop="auditStatus">
        <template slot-scope="scope">
          <template v-if="scope.row.expireStatus == 'notAudit'">未通过</template>
          <template v-if="scope.row.expireStatus == 'passAudit'"
            >通过审核</template
          >
          <template v-if="scope.row.expireStatus == 'stayAudit'"
            >未审核</template
          >
        </template>
      </el-table-column>
      <el-table-column label="审核时间" prop="expireDateTime"></el-table-column>
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.expireStatus == 'stayAudit'"
            size="mini"
            style="background: red; color: #fff"
            @click="customeaudit(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- 调整 -->
    <el-dialog
      title="会员积分调整"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="mini"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="分类" prop="changeType">
            <el-select
              style="width: 180px"
              v-model="ruleForm.changeType"
              placeholder="请选择活动区域"
            >
              <el-option label="增加" value="add"></el-option>
              <el-option label="减少" value="sub"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input v-model.number="ruleForm.number"></el-input>
          </el-form-item>
        </div>
        <!-- <div style="display:flex;margin:0 0 15px 0">
          <el-form-item label="积分类型" prop="speciesType">
            <el-select style="width:180px" v-model="ruleForm.speciesType">
              <el-option label="金币" value='species'></el-option>
              <el-option label="预留款" value='money'></el-option>
            </el-select>
          </el-form-item>
         
        </div> -->
        <!-- <div style="display:flex;margin:0 0 15px 0">
         
        </div> -->
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="操作说明" prop="remark">
            <el-input
              style="width: 500px"
              type="textarea"
              :rows="4"
              v-model="ruleForm.remark"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 审核弹窗 -->
    <el-dialog
      title="积分审核"
      :visible.sync="dialogVisibleaudit"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="auditList"
        size="mini"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="审核状态">
          <el-select
            style="width: 180px"
            v-model="auditList.expireStatus"
            placeholder="请选择活动区域"
          >
            <el-option label="已通过" value="passAudit"></el-option>
            <el-option label="未通过" value="notAudit"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            style="width: 180px"
            v-model="auditList.remark"
          ></el-input>
        </el-form-item>
        <div>
          <el-button size="mini" type="primary" @click="auditadd"
            >确定</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="dialogVisibleaudit = false"
            >取消</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customerintegralSubsidiary",
  data() {
    return {
      auditList: {
        expireStatus: "",
        remark: "",
      },
      businessId: "",
      // 审核弹窗
      dialogVisibleaudit: false,
      // 调整表单
      ruleForm: {
        // recordId: "",
        // orderType: "",
        // pntDirection: null,
        // pntValue: null,
        // orderNum: '',
        // orderSourceDesc: "",
        // drawState: "",
        // lockState: "",
        userId: "",
        number: "",
        changeType: "",
        remark: "",
      },
      // 调整表单验证
      rules: {
        changeType: [
          {
            required: true,
            message: "请选择订单类型",
            trigger: "blur",
          },
        ],
        speciesType: [
          {
            required: true,
            message: "请选择分类",
            trigger: "blur",
          },
        ],
        number: [
          {
            required: true,
            message: "请输入数量",
          },
          {
            type: "number",
            message: "数量只能为数字",
          },
        ],

        remark: [
          {
            required: true,
            message: "请输入操作说明",
          },
        ],
      },
      dialogVisible: false,
      customerData: {
        id: "",
      },
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      // 表格数据
      Querydata: [],
      // 查询条件
      form: {
        id: "",
        // 会员查询条件
        vipNumber: "", //会员卡号
        cardNumber: "",
        phone: "",
        userId: "", //用户idid
        changeType: "", //变动方式
        expireStatus: "", //审核状态(未通过notAudit/已通过passAudit)
        remark: "",
        updateDateTimeMin: "",
        updateDateTimeMax: "",
      },
      // 会员id
      customerId: null,
    };
  },
  methods: {
    inputchange1(row) {
      console.log(row);
      if (row == "") {
        //           customerCard
        // customerName
        // integral
        this.customerData.customerCard = "";
        this.customerData.customerName = "";
        (this.customerData.gold = 0), (this.customerData.customerId = null);
      }
    },
    inputchange2(row) {
      if (row == "") {
        this.customerData.customerCard = "";
        this.customerData.customerName = "";
        (this.customerData.gold = 0), (this.customerData.customerId = null);
      }
    },
    inputchange3(row) {
      if (row == "") {
        this.customerData.customerCard = "";
        this.customerData.customerName = "";
        (this.customerData.gold = 0), (this.customerData.customerId = null);
      }
    },
    // 审核弹窗确定按钮
    auditadd() {
      if (
        this.auditList.remark == "" ||
        this.auditList.expireStatus == ""
      ) {
        this.$message({
          message: "请填写信息",
          type: "warning",
        });
      } else {
        this.getgoldCoinAudit();
      }
    },
    // 审核按钮
    customeaudit(row) {
      console.log(row);
      this.businessId = row.id;
      this.auditList.remark = "";
      this.auditList.expireStatus = "";
      this.dialogVisibleaudit = true;
    },
    // 金币审核接口
    getgoldCoinAudit() {
      this.$axios
        .updUserIntegralRecord({
          id: this.businessId,
          auditRemark: this.auditList.remark,
          expireStatus: this.auditList.expireStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "审核成功",
              type: "success",
            });
            (this.dialogVisibleaudit = false), this.getinformation();
            //   this.getgoldList()
            // if (this.customerData.customerCard != '') {
            //   this.getinformation()

            // }
          }
        });
    },
    // 调整接口
    getgoldAdjustment(row) {
      this.$axios
        .getUserIntegralRecord({
          userId: this.form.id,
          number: this.ruleForm.number,
          changeType: this.ruleForm.changeType,
          remark: this.ruleForm.remark,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "积分调整成功，请审核",
              type: "success",
            });
            this.getinformation();
            this.dialogVisible = false;
          }
        });
    },
    // 查询金币按钮
    customerintegral() {
      this.pageSize = 10;
      this.pageNum = 1;
      // this.getgoldList()
      if (
        this.form.phone != "" ||
        this.form.cardNumber != "" ||
        this.form.vipNumber != ""
      ) {
        this.getinformation();
      } else {
        this.$message({
          message: "请输入手机号或证件号或卡号",
          type: "warning",
        });
      }
    },
    // 调整确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getgoldAdjustment();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 查询会员信息
    getinformation() {
      this.$axios
        .getqueryCustomer({
          phone: this.form.phone,
          cardNumber: this.form.cardNumber,
          vipNumber: this.form.vipNumber,
        })
        .then((res) => {
          if (res.code == "00000") {
            console.log(res);
            if (res.data == null) {
              this.$message({
                message: "查询会员信息错误",
                type: "warning",
              });
            } else {
              this.customerData = res.data;
              this.form.id = res.data.id;
              if (this.form.id) {
                this.getgoldList();
              }
            }
          } else {
            this.$message({
              message: "查询会员信息错误",
              type: "warning",
            });
          }
        });
    },
    // 表格数据  金币查询条件
    getgoldList() {
      this.$axios
        .getUserIntegralRecordList({
          userId: this.form.id,
          changeType: this.form.changeType,
          auditStatus: this.form.auditStatus,
          remark: this.form.remark,
          updateDateTimeMin: this.form.updateDateTimeMin,
          updateDateTimeMax: this.form.updateDateTimeMax,
          pageSize: this.pageSize,
          pageNo: this.pageNum,
        })
        .then((res) => {
          console.log(res);
          this.pageTotal = res.data.total;
          this.Querydata = res.data.records;
        });
    },
    // 调整按钮
    adjustThe() {
      this.ruleForm = {};
      if (this.customerData.id != "") {
        this.dialogVisible = true;
      } else {
        this.$message({
          showClose: true,
          message: "查询会员后再调整",
          type: "warning",
        });
      }
    },
    // // 查询按钮
    // querybutton() {
    //   if (this.form.name != '' || this.form.phone != '' || this.form.cardNum != '') {
    //     this.getinformation()
    //   } else {
    //     this.$message({
    //       message: '请至少输入一种方式查询会员信息',
    //       type: 'warning'
    //     });
    //   }

    // },
    // 分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.pageSize = value;
      this.getgoldList();
    },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.pageNum = value;

      this.getgoldList();
      // orders = res.data;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.customerintegralSubsidiary {
  margin: 20px;
}
</style>